<template>
  <el-form label-position="left"
           :model="data"
           ref="form"
           style="margin: 10px; width: auto"
  >
    <el-form-item prop="qtType" label="题目">
      <div class="flex-row"
           >
        {{ data.qtData.title }}
      </div>

    </el-form-item>
    <el-form-item prop="qtType" label="分数">
      <span>{{ data.qtData.score }}</span>
    </el-form-item>

    <el-form-item prop="qtTypeStr" label="题型">
      <span>{{ data.qtData.qtTypeStr }}</span>
    </el-form-item>

    <el-form-item prop="qtType" label="标签">
      <span></span>
    </el-form-item>

    <el-form-item prop="qtOption" label="选项">
      <el-table :show-header=false :data="data.qtData.listItemInfo" style="width: 100%">
        <el-table-column prop="checked" label="checked" width="40">
          <template #default="scope">
            <el-checkbox disabled v-model="scope.row.checked"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column prop="content" label="content"/>
      </el-table>
    </el-form-item>

    <el-form-item>
      <div class="w_full flex-row-reverse-center" style="margin-top: 32px;">
        <el-button size="large" @click="click_edit">修改</el-button>
      </div>
    </el-form-item>
  </el-form>
</template>


<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import {FormInstance} from "element-plus";
import {api_question_bank_all} from "@/request/apis/qtApi";
import {QtBankVO} from "@/type/vo/QtBankVO";
import {QtTypeAsString} from "@/utils/EnumHelper";
import msg from "@/components/msg";

const props = defineProps({
  qbId: {
    type: String,
  },
});
const emit = defineEmits(["close"])
const form = ref<FormInstance>();

const data = reactive({
      qbId: props.qbId || "",
      qtData: {} as QtBankVO,
    }
);

onMounted(async () => {
  console.log(data.qbId);
  let r = await api_question_bank_all(data.qbId);
  console.log('r', r);
  if (!r) {
    await msg.error("获取题目数据异常!");
    return;
  }
  if (r.code != 0) {
    await msg.error(`获取题目数据异常!  ${r.code} msg：${r.msg}`);
    return;
  }

  r.data.qtTypeStr = QtTypeAsString(r.data.qtType);
  r.data.listItemInfo.forEach(x=>{
    x.checked= x.isAnswer==1;
  })
  data.qtData = r.data;
  console.log('data.qtData',data.qtData);
})
const click_edit = () => {
  emit("close", true);
}


</script>

<style scoped>

</style>